import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Steps, Form } from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import styles from '../style.less';

const { Step } = Steps;

@connect(state => ({
  newType: state.assetType.newType,
  typeInfo: state.assetType.typeInfo,
  searchAttr: state.assetType.searchAttr,
  loading: state.assetType.loading,
  submitLoading: state.assetType.submitLoading,
}))
@Form.create()
export default class StepForm extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'attribute/fetch',
    });
  }

  getCurrentStep() {
    const { location } = this.props;
    const { pathname } = location;
    const pathList = pathname.split('/');
    switch (pathList[pathList.length - 1]) {
      case 'step-form': return 0;
      case 'confirm': return 1;
      case 'result': return 2;
      default: return 0;
    }
  }

  getCurrentComponent() {
    const componentMap = {
      0: Step1,
      1: Step2,
      2: Step3,
    };
    return componentMap[this.getCurrentStep()];
  }

  render() {
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
    };

    const CurrentComponent = this.getCurrentComponent();

    return (
      <PageHeaderLayout title="新增资产类型" content="增加新的资产类型，为用户提供资产录入使用。">
        <Card bordered={false}>
          <div>
            <Steps current={this.getCurrentStep()} className={styles.steps}>
              <Step title="填写基本类型信息" />
              <Step title="配置类型属性" />
              <Step title="完成" />
            </Steps>
            <CurrentComponent
              formItemLayout={formItemLayout}
              {...this.props}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
